<template>
	<view class="e-p-l-20 e-p-r-20" :style="[AppSkinVar]">
		<view class="">
			<view class="item-box e-p-l-20 e-p-r-20 e-m-b-20 e-rela e-p-t-20" v-for="item in list" :key="item.id">
				<view class="e-p-t-30 e-m-r-18 e-font-28 c-333 fw-600 e-p-r-60">
					{{$t('advanceShare.券码名称')}}：{{item.couponName}}
				</view>
				<view class="h-100 e-flex">
					<view class="e-flex-1 e-flex" @tap="$copy(item.couponShareCode)">
						<text class="e-m-r-18 e-font-28 c-333 fw-600">{{$t('advanceShare.券码')}}：{{item.couponShareCode}}</text>
						<image :src="$staticPath('copy.png')" class="img-32 e-m-r-10"></image>
					</view>
					
				</view>
				<view class="e-p-t-30 e-p-b-40">
					<view class="e-flex  e-font-28 e-m-b-16" @tap="$copy(item.shareUrl)">
						<text class="c-secondary" style="white-space: nowrap;">{{$t('advanceShare.分享链接')}}：</text>
						<text class="e-line-1 c-333 e-m-r-20">{{item.shareUrl}}</text>
						<image :src="$staticPath('copy.png')" class="img-32 e-m-r-10" style="flex: 0 0 32rpx"></image>
					</view>
					<view class="e-flex e-m-b-16">
						<text class="c-secondary">{{$t('advanceShare.生成时间')}}：</text>
						<text class="c-333 e-m-r-20">{{item.shareTime}}</text>
					</view>
				</view>
			</view>
			<empty :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')" v-if="isEmpty"></empty>
			<load-more else :showLoad="showLoad"></load-more>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		getCouponShareDetail
	} from '@/common/request/api'
	import { useQueryPage } from '@/common/hooks'
	import {
		onReachBottom
	} from '@dcloudio/uni-app'
	
	const props = defineProps({
		couponId: String
	})
	
	
	const {
		isEmpty,
		showLoad,
		list,
		handleQueryPage,
		handleRefresh
	} = useQueryPage({
		api: getCouponShareDetail,
		option: {
			params: {
				couponId: props.couponId,
			}
		}
	})
	handleRefresh()
	
	
	onReachBottom(() => {
		handleQueryPage()
	})

</script>

<style>
	page {
		background: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
.h-128 {
	width: calc(100vw - 40rpx);
	height: 128rpx;
}
.btn-box {
	width: 170rpx;
	height: 68rpx;
	background: #FFFFFF;
	border-radius: 46rpx;
}
.e-flex-between {
	justify-content: space-between;
}
.c-34 {
	color: #343434;
}
.scroll-view-box {
	height: calc(100vh - 128rpx);
}
.item-box {
	border-radius: 20rpx;
	box-shadow: inset 0px -1px 0px 0px #F3F3F3;
	background-color: white;
}
.h-100 {
	height: 100rpx;
}
.state-box {
	top: 30rpx;
	right: 30rpx;
}
</style>